<template>
    <div>

        <!-- <div class="filter-container">
            <el-form :model="filterForm" ref="filterForm" :inline="true" label-width="80px">
                <el-form-item label="退货单号">
                    <el-input v-model="filterForm.returnNo" placeholder="请输入/扫描单号" />
                </el-form-item>

                <el-form-item label="采购单号">
                    <el-input v-model="filterForm.purchaseNo" placeholder="请输入/扫描单号" />
                </el-form-item>

                <el-form-item label="产品名称">
                    <el-input v-model="filterForm.productName" placeholder="请输入/扫描单号" />
                </el-form-item>

                <el-form-item label="单状态">
                    <el-select v-model="filterForm.status" placeholder="请选择">
                        
                        <el-option label="全部" value="" />
                        <el-option label="订单确认" value="订单确认" />
                        <el-option label="创建订单" value="创建订单" />
                        <el-option label="订单取消" value="订单取消" />
                        
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleFilter">查询</el-button>
                    <el-button @click="resetFilter">重置</el-button>
                </el-form-item>
                
            </el-form>
        </div> -->
        <!-- 数据列表区域 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="returnName" label="产品名称" width="120" />
                <el-table-column prop="returnCode" label="产品编号" width="120" />
                <el-table-column prop="guiGe" label="产品规格" width="120" />
                <el-table-column prop="danWei" label="单位" width="80" />
                <el-table-column prop="danJia" label="单价" width="80" />
                <el-table-column prop="returnNum" label="退货数" width="80" />
                <el-table-column prop="returnCount" label="总额" width="100" />
                <el-table-column prop="supplierCode" label="采购单号" width="120" />
                <el-table-column prop="supplierName" label="供应商名称" width="120" />
                <el-table-column prop="personStatues" label="状态" width="100" />
                <el-table-column prop="creatTime" label="创建时间" width="150" />
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-button size="small" @click="handleView(scope.row)">查看</el-button>
                        <!-- <el-button size="small" @click="handleDelete(scope.row)" type="danger">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog v-model="tk.IsShow" title="Tips" width="1200px" draggable>
                <template #footer>
                    <div class="dialog-footer">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="caiGname" label="退货单号" width="120" />
                            <el-table-column prop="caiGstatus" label="状态" width="120" />
                            <el-table-column prop="caiGcode" label="采购单号" width="120" />
                            <el-table-column prop="caiGperson" label="制单人" width="80" />
                            <el-table-column prop="caiGdate" label="制单日期" width="80" />
                            <el-table-column prop="personName" label="联系人" width="80" />
                            <el-table-column prop="puchCode" label="供应商编号" width="100" />
                            <el-table-column prop="puchName" label="供应商名称" width="120" />
                            <el-table-column prop="caiGPhone" label="电话" width="120" />
                            <el-table-column prop="caiGDesc" label="备注" width="100" />
                            <el-table-column label="操作" width="120">
                                <template #default="scope">
                                    <el-button size="small" @click="handleView(scope.row)">查看</el-button>
                                    <!-- <el-button size="small" @click="handleDelete(scope.row)" type="danger">删除</el-button> -->
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="dialogVisible = false">
                            Confirm
                        </el-button>
                    </div>
                </template>
            </el-dialog>

        </div>

        <div class="pagination-container">
            <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                :page-sizes="[5, 10, 15, 20]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="page.TotalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

    </div>

    <!-- <div>
        <input v-model="message" placeholder="输入消息" />
        <button @click="sendMessage">发送消息</button>
        <div v-for="(msg, index) in messages" :key="index">{{ msg }}</div>
    </div> -->

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

// const message = ref('');
// const messages = ref([]);

// const socket = new WebSocket('ws://localhost:8080');

// socket.addEventListener('open', () => {
//     console.log('WebSocket 连接已建立');
// });

// socket.addEventListener('message', (event) => {
//     messages.value.push(`收到消息: ${event.data}`);
// });

// socket.addEventListener('error', (error) => {
//     console.log('WebSocket 连接错误:', error);
// });

// socket.addEventListener('close', () => {
//     console.log('WebSocket 连接已关闭');
// });

// const sendMessage = () => {
//     if (message.value) {
//         socket.send(message.value);
//         messages.value.push(`你发送了: ${message.value}`);
//         message.value = '';
//     }
// };


const tk = reactive({
    //新增
    IsShow: false,
    //编辑
    IsUpdate: false,
})

// 分页
const page = reactive({
    PageIndex: 1,
    PageSize: 15,
    TotalCount: 0,
    PageCount: 0,
});
// 模拟数据
const tableData = ref([])

const dialogVisible = ref(false)
//分页查询
const query = () => {
    axios.get("http://localhost:5124/api/Return/GetReturn", {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
        }
    }).then(res => {
        tableData.value = res.data.lists;
        page.TotalCount = res.data.totalCount;
        page.PageCount = res.data.pageCount;
    });
}

const handleView = (row: any) => {
    axios.get("http://localhost:5124/api/Return/GetCaiG").then(res => {
        tableData.value = res.data.data;
    });
}

// 分页
const handleSizeChange = (index: any) => {
    page.PageSize = index;
    query();
};

const handleCurrentChange = (index: any) => {
    page.PageIndex = index;
    query();
};

onMounted(() => {
    query();
})

</script>

<style scoped>
.filter-container {
    margin-bottom: 15px;
}

.table-container {
    margin-bottom: 15px;
}

.pagination-container {
    text-align:center;
}
</style>